<template>
    <div class="app">
        <Header/>
        <div class="back">
            <div class="con">
              <div class="pxes"></div>
              <div class="listneo">
                <coreL/>
                <div class="datare">
                  <div class="ra">售后维权</div>
                  <div class="forms">
                    <div class="aoeoppp">售后维权查询</div>
                    <el-form :model="ruleForm" :inline="true" ref="ruleForm" label-width="150px" class="demo-ruleForm">
                        <el-form-item label="服务类型">
                          <el-select v-model="ruleForm.name" placeholder="请选择活动区域">
                            <el-option label="区域一" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                          </el-select>
                        </el-form-item>
                          <el-form-item label="退款状态">
                            <el-select v-model="ruleForm.posin" placeholder="请选择活动区域">
                              <el-option label="区域一" value="shanghai"></el-option>
                              <el-option label="区域二" value="beijing"></el-option>
                            </el-select>
                          </el-form-item>
                          <el-form-item label="活动时间">
                            <el-col :span="11">
                              <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>
                            </el-col>
                            <el-col class="line" :span="2">-</el-col>
                            <el-col :span="11">
                              <el-time-picker placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>
                            </el-col>
                          </el-form-item>
                      <el-form-item style="margin-left: 347px;">
                        <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
                      </el-form-item>
                    </el-form>
                  </div>
                  <div class="dzlist">
                    <div class="aoeoppp">售后维权订单</div>
                    <div class="asfafai">
                      <span style="width:310px">宝贝概况</span>
                      <span style="width:110px">退款金额</span>
                      <span style="width:130px">申请时间</span>
                      <span style="width:100px">服务类型</span>
                      <span style="width:100px">退款状态</span>
                      <span style="width:100px">交易操作</span>
                    </div>
                      <div class="conem">
                        <div class="list">
                          <div class="top flex_lr">
                            <div class="flex_lr">
                              <div>订单号：915426218542320</div>
                              <div class="adfadasao">退款编号：2019112700251325</div>
                            </div>
                            <div class="flex_lr">
                              <div class="adafggerr">简柏格</div>
                              <div>联系卖家</div>
                            </div>
                          </div>
                          <div class="con_u">
                            <div class="toen1">
                              <div class="topeng">
                                <div class="img_qw"><img src="@/assets/img/aa.png" alt=""></div>
                                <div class="w250"> 
                                  <h4>简柏格真皮百搭款女包</h4>
                                  <br/>
                                  <p>颜色：黑色 尺码：中号</p>
                                  <p>发货时间：三天内</p>
                                </div>
                              </div>
                              
                            </div>
                            <div class="toen2">
                              
                              <div>￥380 </div>
                            </div>
                            <div class="toen3">
                              
                              <div>2019-11-25 16:55:10</div>

                            </div>
                            <div class="toen4">

                              <div class="ww_ww">退货 </div>
                            </div>
                            <div class="toen5">
                              <div>退款成功</div>

                            </div>
                            <div class="toen6">
                              <div>服务详情</div>

                            </div>
                          </div>
                        </div>

                      </div>
                  </div>
                </div>
              </div>
              <coreF/>
            </div>
        </div>
        <Footer/>
    </div>
</template>
<script>
import Header from '@/components/Header'
import Footer from '@/components/Footer'
import coreL from '@/components/coreL'
import coreF from '@/components/coreF'
export default {
    components: { 
    Header,
    Footer,
    coreL,
    coreF
    },
    data() {
      return {
        ruleForm: {
          name: '',
          posin:'',
          date1:'',
          date2: ''
        },
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
          eee:'wdawed'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }]
        }; 
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
    },
}
</script>
<style scoped>
.app  /deep/  .ist_l .ist_c li:nth-child(2) {
    background-color: #ff9381;
    width: 126px;
    height: 50px;
    display: block;
}
/* .forms /deep/ .el-button--primary {
    background-color: #ff9381;
    border-color: #ff9381;
} */
.flex_lr {
  display: flex;
  justify-content: space-between;
}
.box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.back {
    background-color: #f06048
}  
.pxes {
  height: 15px;
}
.back .con {
  width: 1200px;
  margin: 0 auto;
  background-color: #eee
} 
.listneo {
  width: 1161px;
  margin: 0px auto;
  display: flex;
  justify-content: space-between;
}
.datare {
  width: 930px;
  border-radius: 6px;
  background-color: #fff
}
.datare .ra {
  font-size: 20px;
  color: #fff;
  text-align: center;
  line-height: 43px;
  margin-left: 14px;
  position: relative;
  top: 15px;
  width: 192px;
	height: 43px;
	background-color: #f06048;
	box-shadow: 0px 4px 2px 0px 
		rgba(70, 23, 15, 0.38);
	border-radius: 0px 0px 20px 20px;
}
.datare .forms {
  border-top: 1px solid #bdbdbd;
  margin: 25px auto;
  width: 890px;
}
.dzlist {
  width: 890px;
  margin: 0 auto;
}
.demo-ruleForm {
  margin-top: 15px;
}
.aoeoppp {
  font-size: 16px;
  margin-top: 15px;
  border-bottom: 5px solid #f06048;
  width: 100px;
  line-height: 10px;
  margin-bottom: 10px;
}
.conem {
  width: 890px;
  margin: 0 auto;
}
.conem .list {
  width: 888px;
  margin-bottom: 15px;
}
.conem .list .top {
  height: 30px;
  border-bottom: 1px solid #dcdcdc;
  text-align: center;
  line-height: 30px;
  background-color: #ffbbb0
}
.conem .list .top div:nth-child(1) {
  padding-left: 15px;
}
.conem .list .top div:nth-child(2) {
  padding-right: 15px;
}
.conem .list .con_u {
  height: 160px;
  border-bottom: 1px solid #dcdcdc;
}
.conem .list .fom {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}
.conem .list .fom div:hover {
  color: #fff;
  background-color: #f06048;
  cursor: pointer;
}
.conem .list .fom div {
  width: 95px;
	height: 26px;
  line-height: 26px;
  text-align: center;
	border-radius: 13px;
	border: solid 1px #f06048;
  margin-right: 15px;
  margin-top: 7px;
  font-size: 16px;
	font-weight: normal;
	font-stretch: normal;
	line-height: 24px;
	letter-spacing: 0px;
	color: #f06048;
}
.con_u {
  display: flex
}
.con_u .toen1 {
  width: 319px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.img_qw {
      margin-top: 5px;
    margin-left: -15px;
    padding-right: 10px;
}
.topeng .img_qw img{
	width: 120px;
	height: 120px;
}
.topeng {
  display: flex;
  justify-content: space-between;
  margin: 10px 8px 0px 16px;
}
.topeng .w250 {
  width: 246px;
  line-height: 27px;
}
.topeng .w250 h4 {
  font-size: 18px
}
.topeng .w250  .xpsgf{
  width: 64px;
	height: 19px;
	background-color: #e44d5e;
	border-radius: 9px;
  color: #fff;
  line-height: 19px;
  text-align: center;
}
.con_u .dianjia{
  font-size: 18px;
	font-weight: normal;
	font-stretch: normal;
	line-height: 24px;
	letter-spacing: 0px;
	color: #313131;
  padding-left: 28px;
}
.con_u .dianjia img{
	width: 22px;
	height: 20px;
  position: relative;
  top: 3px;
}
.con_u .toen2 {
  width: 106px;
  text-align: center;
}
.con_u .toen2 div:nth-child(1){
  font-size: 18px;
  color: #f06048;
  margin-top: 60px;
}
.con_u .toen3 div:nth-child(1){
  font-size: 14px;
  margin-top: 60px;
}
.con_u .toen4 div:nth-child(1){
  font-size: 14px;
  margin-top: 60px;
}
.con_u .toen5 div:nth-child(1){
  font-size: 14px;
  margin-top: 60px;
  color: #22ac38;
}
.con_u .toen6 div:nth-child(1){
  font-size: 14px;
  margin-top: 60px;
  margin-left: 30px;
}
.con_u .toen2 div:nth-child(2){
	font-size: 60px;
	font-weight: normal;
	font-stretch: normal;
	line-height: 24px;
	letter-spacing: 0px;
	color: #313131;
  margin-top: 40px;
}
.con_u .toen3 {
  width: 143px;
  text-align: center;
}
.con_u .toen3 .ww{
	font-size: 20px;
	font-weight: normal;
	font-stretch: normal;
	line-height: 24px;
	letter-spacing: 0px;
	color: #f06048;
  margin-top: 20px;
}
.con_u .toen4 .ww{
	font-size: 20px;
	font-weight: normal;
	font-stretch: normal;
	line-height: 24px;
	letter-spacing: 0px;
	color: #f06048;
  margin-top: 20px;
}
.con_u p {
  font-size: 12px;  
}
.con_u .toen4 {
  width: 100px;
  text-align: center;
}

.con_u .toen5 {
  width: 100px;
  text-align: center;
}
.toen5 .baen {
  width: 80px;
	height: 20px;
	background-color: #f06048;
  color: #fff;
  text-align: center;
  line-height: 20px;
  margin-top: 15px;
  margin-left: 3px;
}
.eee_50 {
  width: 80px;
	height: 20px;
	border: solid 1px #a0a0a0;
  display: block;
  margin: 5px auto;
}
.eee_20 {
  margin-top: 20px;
  margin-bottom: 10px;
}
.ww_ww {
  color: #959595;
  font-size: 12px;
  margin-top: 32px;
}
.asfafai {
	width: 890px;
	height: 30px;
  line-height: 30px;
	background-color: #c9c9c9;  
  margin-bottom: 12px;
}
.asfafai span {
  display: inline-block;
  text-align: center;
}
.adfadasao {
  margin-left: 20px;
}
.adafggerr {
  margin-right: 20px;
}
</style>